import React, { useEffect, useRef } from 'react'
// redux管理工具
import { useDispatch, useSelector } from 'react-redux'
import { useHistory, useLocation } from 'react-router-dom'
// 防抖工具
import { useDebounce, useDebounceState, useState } from 'mkit-hooks'

import { Form, Input, Button, Checkbox } from 'antd'

import { createFromIconfontCN } from '@ant-design/icons'

import { tryLogin } from '@/models/auth'
import storageManage from '@/utils/storageManage'

const LOGIN_ICONS = '//at.alicdn.com/t/font_3275081_e7h3n0zqpiw.js'
const CAPTCHA_PATH = 'http://shop.fenotes.com/adminapi/captcha_pro'

// 创建Icon图标
const EasyIcon = createFromIconfontCN({
  scriptUrl: LOGIN_ICONS,
})

/**
 * 登陆页数据
 * @param {*} props
 * @returns
 */
const Login = props => {
  const history = useHistory()
  const location = useLocation()
  const dispatch = useDispatch()
  const authInfo = useSelector(state => state.authInfo)
  const [captcha, setCaptcha] = useDebounceState(CAPTCHA_PATH, 1000)

  useEffect(() => {
    console.log('检查到数据变化')
    if (!authInfo.token) {
      return
    }
    storageManage.set('token', authInfo.token, authInfo.expires_time)
    console.log('fasdfasdfas')
    const origin = location.state.origin
    history.push(origin ? origin : '/')
  }, [authInfo, history, location.state.origin])

  // 为了减少事件发生的频率，下面的方法需要使用防抖
  const validateSuccess = useDebounce(val => {
    dispatch(tryLogin(val))
  }, 500)

  const validateFailed = useDebounce(err => {
    console.log(err)
  }, 500)

  return (
    <div className="docwrap login">
      <div className="dialog">
        <div className="logo"></div>
        <div className="form-wrap">
          <Form
            name="basic"
            initialValues={{ remember: true }}
            onFinish={validateSuccess}
            onFinishFailed={validateFailed}
            autoComplete="off"
          >
            <Form.Item
              name="account"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input prefix={<EasyIcon type="icon-account" />} />
            </Form.Item>

            <Form.Item
              name="pwd"
              rules={[{ required: true, message: '请输dfasdfa入密码!' }]}
            >
              <Input.Password prefix={<EasyIcon type="icon-mima" />} />
            </Form.Item>

            <div className="captcha-wrap">
              <Form.Item
                name="imgcode"
                rules={[{ required: true, message: '请输入dfsasdfasd验证码!' }]}
              >
                <Input prefix={<EasyIcon type="icon-yanzhengma" />} />
              </Form.Item>
              <img
                // onClick={updateCaptcha}
                onClick={() => setCaptcha(`${CAPTCHA_PATH}?_=${Date.now()}`)}
                src={captcha}
                alt="pictrue"
              />
            </div>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                登陆
              </Button>
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked">
              <Checkbox>记住我</Checkbox>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default Login
